import React from "react";
import { Form, Input, Space, Button, Upload, message } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { TextWidget, getMessage } from '@inbiz/react';
import { useForm } from '@formily/react';
import { getExtByFileName } from '@inbiz/utils';

const UploadTemplate = (props: any) => {

  const { currentData, setLoading, form } = props;
  const { appInfo } = useForm() as unknown as { appInfo: { appId: string } };
  // 模板上传
  const UploadProps = {
    name: 'file',
    showUploadList: false,
    headers: {
      appId: appInfo.appId,
    },
    action: `/inbiz/api/services/staticresource/v3/file/system/${appInfo.appId}`,
    accept: '.jsx',
    data: { groupName: 'template' },
    beforeUpload(file: any) {
      const fileextname = getExtByFileName(file.name)
      if (fileextname !== '.jsx') {
        message.error(
          '更新失败！只能上传后缀为.jsx的文件',
        )
        setLoading(false);
        return false
      }
      return file
    },
    onChange(info: any) {
      setLoading(true);
      if (info.file.status !== 'uploading') {
        setLoading(false);
      }
      if (info.file.status === 'done') {
        setLoading(false);
        message.success(`${info.file.name} ${getMessage('SearchEngine.uploadSuccess')}`);
        form.setFieldsValue({ quikSearchTemplate: info.file.name, filepath: info.file.response.path })
      } else if (info.file.status === 'error') {
        setLoading(false);
        message.error(`${info.file.name} ${getMessage('SearchEngine.uploadFail')}`);
      }
    },
  };
  const resetTemplate = () => {
    if (currentData.title.includes('folder')) {
      form.setFieldsValue({
        quikSearchTemplate: 'folder.jsx',
        filepath: InbizConfig.PUBLIC_PATH + '/template_search/folder.jsx',
      })
    } else if (currentData.title.includes('file')) {
      form.setFieldsValue({
        quikSearchTemplate: 'file.jsx',
        filepath: InbizConfig.PUBLIC_PATH + '/template_search/file.jsx',
      })
    }
    message.success(getMessage('SearchEngine.resetTemplateSuccess'))
  }

  const onDownloadTemplate = () => {
    let aLink = document.createElement('a');
    aLink.download = 'template_search.jsx'
    const content = InbizConfig.PUBLIC_PATH + '/template_search/file_origin.jsx'
    aLink.href = content;
    document.body.appendChild(aLink);
    aLink.click();
    aLink.remove();
  }


  return (
    <div>
      <Form.Item
        label={getMessage('SearchEngine.quikSearchTemplate')}
      >
        <Form.Item
          name="quikSearchTemplate"
          style={{ display: 'inline-block', marginRight: 10 }}
        >
          <Input
            style={{ marginRight: 8 }}
            readOnly
            suffix={<DownloadOutlined onClick={() => onDownloadTemplate()} />}
          />
        </Form.Item>
        <Form.Item style={{ display: 'inline-block', }} name="filepath">
          <Space wrap>
            <Upload {...UploadProps}>
              <Button type="primary">
                <TextWidget>SearchEngine.choice</TextWidget>
              </Button>
            </Upload>
            {(currentData.isFile || currentData.isFolder) && (
              <Button type="primary" onClick={resetTemplate}>
                <TextWidget>SearchEngine.reset</TextWidget>
              </Button>
            )}
          </Space>
        </Form.Item>
      </Form.Item>
    </div>
  )
}
export default UploadTemplate;